<template>
    <div class="Tickets-container">
        <div class="left">
            <!-- 园区门票 -->
            <div class="markBg">
                <div class="markBg-box-title" style="width: 104px;">园区门票</div>
                <div class="markBg-box-content">
                    <div class="item">
                        <img src="../../assets/manage/icon-b.png" alt="">
                        <p>总门票数量 <span>{{parkMoneyObj.ticketCount}}</span>张</p>
                    </div>
                    <div class="item">
                        <img src="../../assets/manage/icon-c.png" alt="">
                        <p> 总收入金额<span>{{parkMoneyObj.ticketRevenue}}</span>元</p>
                    </div>
                    <div class="parkNumBox" style="margin-bottom: 20px">
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{parkMoneyObj.individualNum}}</span>
                                <u>张</u>
                            </div>
                            <div class="bottom">个人票总数量</div>
                        </div>
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{parkMoneyObj.groupNum}}</span>
                                <u>张</u>
                            </div>
                            <div class="bottom">团体票总数量</div>
                        </div>
                    </div>
                    <div class="parkNumBox">
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{parkMoneyObj.societyGroupNum}}</span>
                                <u>张</u>
                            </div>
                            <div class="bottom">今日个人票数量</div>
                        </div>
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{parkMoneyObj.elseNum}}</span>
                                <u>张</u>
                            </div>
                            <div class="bottom">今日团体票数量</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 游客预约统计 -->
            <div class="markBg">
                <div class="markBg-box-title" style="width: 125px;">游客预约统计</div>
                <div class="markBg-box-tourist">
                    <div class="pie-echarts">
                        <div class="pieEcharts" style="position: relative;">
                            <div id="screenCharta" style="width: 100%;height: 100%;"></div>
                            <span style="position: absolute;top: 32px;left: 12px;color: #32E9FF;font-size: 16px;width: 56px;text-align: center;font-family: PMZD, serif;">
                                {{todayPeopleObj.ratio}}%
                            </span>
                        </div>
                        <p>今日入园核销比</p>
                    </div>
                    <div class="tourist-text">
                        <div class="tourist-text-item">
                            <p>
                                <span>{{todayPeopleObj.todayBookingCount}}</span>
                                <span>人</span>
                            </p>
                            <p>
                                <i></i>
                                <span>预约今日游玩人数</span>
                            </p>
                        </div>
                        <div class="tourist-text-item">
                            <p>

                                <span>{{todayPeopleObj.tomorrowBookingCount}}</span>
                                <span>人</span>
                            </p>
                            <p>
                                <i></i>
                                <span>预约明日游玩人数</span>
                            </p>
                        </div>
                        <div class="tourist-text-item">
                            <p>

                                <span>{{todayPeopleObj.todayEntranceCount}}</span>
                                <span>人</span>
                            </p>
                            <p>
                                <i></i>
                                <span>今日入园人数</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="markBg">
                <div class="markBg-box-title" style="width: 175px;">游客多次预约统计</div>
                <div class="markBg-box-tourist">
                    <div class="pie-echarts">
                        <div class="pieEcharts">
                            <div class="pieEcharts" style="position: relative;">
                                <div id="morePeopleChart" style="width: 100%;height: 100%;"></div>
                                <span style="position: absolute;top: 32px;left: 12px;color: #32E9FF;font-size: 16px;width: 56px;text-align: center;font-family: PMZD, serif;" v-if="morePeopleObj.ratio">{{(morePeopleObj.ratio * 100).toFixed(2)}}%</span>
                            </div>
                        </div>
                        <p>总多次入园核销比</p>
                    </div>
                    <div class="tourist-text" style="display: flex;margin-top: 20px;">
                        <div class="tourist-text-item">
                            <p>
                                <span>{{morePeopleObj.monthRepeatedlyBookingCount}}</span>
                                <span>人</span>
                            </p>
                            <p style="display: flex;align-items: center">
                                <i></i>
                                <span style="width: 112px">近30天多次预约人数</span>
                            </p>
                        </div>
                        <div class="tourist-text-item">
                            <p>

                                <span>{{morePeopleObj.repeatedlyBookingCount}}</span>
                                <span>人</span>
                            </p>
                            <p style="width: 100px;">
                                <i></i>
                                <span>总多次预约人数</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="markBg">
                <div class="markBg-box-title" style="width: 320px;">可预约期内票数统计({{futurePeopleObj.selectTime}})</div>
                <div class="markBg-box-tourist">
                    <div class="pie-echarts">
                        <div class="pieEcharts" style="position: relative;">
                            <div id="futureChart" style="width: 100%;height: 100%;"></div>
                            <span style="position: absolute;top: 32px;left: 12px;color: #32E9FF;font-size: 16px;width: 56px;text-align: center;font-family: PMZD, serif;"
                            v-if="futurePeopleObj.bookingCount && futurePeopleObj.bookingCount && futurePeopleObj.remainBookingCount">
                                {{([futurePeopleObj.bookingCount / (futurePeopleObj.bookingCount + futurePeopleObj.remainBookingCount)]*100).toFixed(2)}}%
                            </span>
                        </div>
                        <p>预约率</p>
                    </div>
                    <div class="tourist-text">

                        <div class="tourist-text-item">
                            <p>
                                <span>{{futurePeopleObj.bookingCount + futurePeopleObj.remainBookingCount}}</span>
                                <span>张</span>
                            </p>
                            <p>
                                <i></i>
                                <span>总票数</span>
                            </p>
                        </div>
                        <div class="tourist-text-item">
                            <p>

                                <span>{{futurePeopleObj.bookingCount}}</span>
                                <span>张</span>
                            </p>
                            <p>
                                <i></i>
                                <span>已预约票数</span>
                            </p>
                        </div>
                        <div class="tourist-text-item">
                            <p>

                                <span>{{futurePeopleObj.remainBookingCount}}</span>
                                <span>张</span>
                            </p>
                            <p>
                                <i></i>
                                <span>剩余票数</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="markBg">
                <div class="markBg-box-title" style="width: 146px;">退票数量统计</div>
                <div class="markBg-box-tourist">
                    <div class="pie-echarts">
                        <div class="pieEcharts" style="position: relative;">
                            <div id="outChartd" style="width: 100%;height: 100%;"></div>
                            <span style="position: absolute;top: 30px;left: 14px;color: #32E9FF;font-size: 16px;width: 56px;text-align: center;" v-if="outPeopleObj.refundRatio">{{(outPeopleObj.refundRatio * 100).toFixed(2)}}%</span>
                        </div>
                        <p>总退票率</p>
                    </div>
                    <div class="tourist-text">

                        <div class="tourist-text-item">
                            <p>

                                <span>{{outPeopleObj.todayRefundNum}}</span>
                                <span>张</span>
                            </p>
                            <p>
                                <i></i>
                                <span>今日退票数量</span>
                            </p>
                        </div>
                        <div class="tourist-text-item">
                            <p>

                                <span>{{outPeopleObj.monthRefundNum}}</span>
                                <span>张</span>
                            </p>
                            <p>
                                <i></i>
                                <span>本月退票数量</span>
                            </p>
                        </div>
                        <div class="tourist-text-item">
                            <p>

                                <span>{{outPeopleObj.refundNum}}</span>
                                <span>张</span>
                            </p>
                            <p>
                                <i></i>
                                <span>总退票数量</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { todayPeople, futurePeople, outPeople, morePeople, parkMoney, } from '../../axios/manage/index'
    export default {
        name: "Tickets",
        data() {
            return {
                todayPeopleObj:{},
                futurePeopleObj:{},
                outPeopleObj:{},
                morePeopleObj:{},
                parkMoneyObj:{},
                timer:null,
            }
        },
        mounted() {
            this.getTodayPeople();
            this.getFuturePeople();
            this.getOutPeople();
            this.getMorePeople();
            this.getParkMoney();

            this.realTimeInit();  //实时数据
        },
        methods: {
            realTimeInit() {
                //实时数据刷新 10s一次
                let that = this;
                this.timer = setInterval(function () {
                    that.getTodayPeople();
                    that.getFuturePeople();
                    that.getOutPeople();
                    that.getMorePeople();
                    that.getParkMoney();
                },10000)
            },
            getTodayPeople() {
                todayPeople().then(res => {
                    // console.log(res)
                    this.todayPeopleObj = res.data;
                    // console.log(this.todayPeopleObj,123);
                }, err => {
                })
            },
            getFuturePeople() {
                futurePeople().then(res => {
                    // console.log(res)
                    this.futurePeopleObj = res.data;
                }, err => {
                })
            },
            getOutPeople() {
                outPeople().then(res => {
                    // console.log(res)
                    this.outPeopleObj = res.data;
                }, err => {
                })
            },
            getMorePeople() {
                morePeople().then(res => {
                    // console.log(res)
                    this.morePeopleObj = res.data;
                }, err => {
                })
            },
            getParkMoney() {
                parkMoney().then(res => {
                    this.parkMoneyObj = res.data;
                }, err => {
                })
            },
            morePeopleChartInit(el) {
                const myChart = this.$echarts.init(document.getElementById('morePeopleChart'));
                let datas = {
                    online: (this.morePeopleObj.ratio * 100).toFixed(2),
                    all: 100,
                };
                const options = {
                    grid: {
                        top: 0,
                        left: 0,
                        right: 0,
                        bottom: 0
                    },
                    polar: {
                        radius: ['90%', '75%'],
                        center: ['50%', '50%'],
                    },
                    angleAxis: {
                        max: datas.all,
                        show: false,
                        clockwise: false,
                    },
                    radiusAxis: {
                        type: 'category',
                        show: false,
                        axisLabel: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                    },
                    series: [
                        {
                            name: '',
                            type: 'bar',
                            roundCap: false,
                            barWidth: 90,
                            showBackground: true,
                            backgroundStyle: {
                                color: '#174F62'
                            },
                            data: [datas.online],
                            coordinateSystem: 'polar',
                            itemStyle: {
                                color: '#32E9FF'
                            },
                        },
                    ]
                }
                myChart.setOption(options)
            },
            outChartdInit(el) {
                const myChart = this.$echarts.init(document.getElementById('outChartd'));
                let datas = {
                    online: (this.outPeopleObj.refundRatio * 100).toFixed(2),
                    all: 100,
                };
                const options = {
                    grid: {
                        top: 0,
                        left: 0,
                        right: 0,
                        bottom: 0
                    },
                    polar: {
                        radius: ['90%', '75%'],
                        center: ['50%', '50%'],
                    },
                    angleAxis: {
                        max: datas.all,
                        show: false,
                        clockwise: false,
                    },
                    radiusAxis: {
                        type: 'category',
                        show: false,
                        axisLabel: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                    },
                    series: [
                        {
                            name: '',
                            type: 'bar',
                            roundCap: false,
                            barWidth: 90,
                            showBackground: true,
                            backgroundStyle: {
                                color: '#174F62'
                            },
                            data: [datas.online],
                            coordinateSystem: 'polar',
                            itemStyle: {
                                color: '#32E9FF'
                            },
                        },
                    ]
                }
                myChart.setOption(options)
            },
            futureChartInit(el) {
                const myChart = this.$echarts.init(document.getElementById('futureChart'));
                let datas = {
                    // online: ([this.futurePeopleObj.bookingCount / (this.futurePeopleObj.bookingCount + this.futurePeopleObj.remainBookingCount)]*100).toFixed(2),
                    online:([this.futurePeopleObj.bookingCount / (this.futurePeopleObj.bookingCount + this.futurePeopleObj.remainBookingCount)]*100).toFixed(2),
                    all: 100,
                };
                const options = {
                    grid: {
                        top: 0,
                        left: 0,
                        right: 0,
                        bottom: 0
                    },
                    polar: {
                        radius: ['90%', '75%'],
                        center: ['50%', '50%'],
                    },
                    angleAxis: {
                        max: datas.all,
                        show: false,
                        clockwise: false,
                    },
                    radiusAxis: {
                        type: 'category',
                        show: false,
                        axisLabel: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                    },
                    series: [
                        {
                            name: '',
                            type: 'bar',
                            roundCap: false,
                            barWidth: 90,
                            showBackground: true,
                            backgroundStyle: {
                                color: '#174F62'
                            },
                            data: [datas.online],
                            coordinateSystem: 'polar',
                            itemStyle: {
                                color: '#32E9FF'
                            },
                        },
                    ]
                }
                myChart.setOption(options)
            },
            screenChartaInit(el) {
                const myChart = this.$echarts.init(document.getElementById('screenCharta'));
                let datas = {
                    online: this.todayPeopleObj.ratio,
                    all: 100,
                };
                // console.log(datas)
                const options = {
                    grid: {
                        top: 0,
                        left: 0,
                        right: 0,
                        bottom: 0
                    },
                    polar: {
                        radius: ['90%', '75%'],
                        center: ['50%', '50%'],
                    },
                    angleAxis: {
                        max: datas.all,
                        show: false,
                        clockwise: false,
                    },
                    radiusAxis: {
                        type: 'category',
                        show: false,
                        axisLabel: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                    },
                    series: [
                        {
                            name: '',
                            type: 'bar',
                            roundCap: false,
                            barWidth: 90,
                            showBackground: true,
                            backgroundStyle: {
                                color: '#174F62'
                            },
                            data: [datas.online],
                            coordinateSystem: 'polar',
                            itemStyle: {
                                color: '#32E9FF'
                            },
                        },
                    ]
                }
                myChart.setOption(options)
            }
        },
        watch: {
            morePeopleObj(val) {
                this.morePeopleChartInit()
            },
            outPeopleObj(val) {
                this.outChartdInit()
            },
            futurePeopleObj(val) {
                this.futureChartInit()
            },
            todayPeopleObj(val) {
                this.screenChartaInit()
            }
        },
        beforeDestroy() {
            clearInterval(this.timer);
        }
    }
</script>

<style scoped lang="scss">
    .Tickets-container {
        width: 388px;
        background: rgba(0, 11, 26, 0.6);
        position: fixed;
        top: 88px;
        left: 20px;
        bottom: 19px;
        border-top: 1px solid #47BDFF;
        .left::-webkit-scrollbar-thumb {
            background: #99a9bf63 !important;
            border-radius: 20px !important;
        }

        .left::-webkit-scrollbar-track-piece {
            background: #141835 !important;
        }

        .left::-webkit-scrollbar {
            width: 6px !important;
            height: 6px !important;
        }
        .left {
            /*width: 380px;*/
            /*background: rgba(0, 11, 26, 0.6);*/
            /*border-top: 1px solid #47BDFF;*/
            /*margin-left: 10px;*/
            /*margin-top: 10px;*/

            width: 100%;
            height: 100%;
            background: rgba(11, 34, 63, 0.5);
            overflow-y: scroll;
            overflow-x: hidden;

            .markBg {
                background: rgba(11, 34, 63, 0.5);
                border-top: 1px solid #47BDFF;
            }


            .markBg-box-title {
                font-size: 16px;
                height: 34px;
                line-height: 34px;
                background: url("../../static/visitor/img/ageBox.png") no-repeat 100% 100%;
                background-size: 100% 100%;
                text-indent: 9px;
                color: #fff;
                padding-right: 20px;
                display: inline-block;
            }

            .markBg-box-content {
                height: 280px;
                padding: 10px;

                .item {
                    display: flex;
                    margin-left: 35px;
                    margin-right: 25px;
                    p {
                        font-size: 14px;
                        color: #97D0F4;
                        line-height: 75px;
                        margin-left: 37px;

                        span {
                            font-size: 20px;
                            margin-left: 15px;
                            margin-right: 5px;
                            color: #4DFFEC;
                            font-family: PMZD, serif;
                        }
                    }

                    img {
                        width: 81px;
                        height: 75px;
                    }
                }

                .parkNumBox {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 10px;

                    .parkNumItem {
                        width: 160px;
                        height: 44px;
                        background: url("../../static/traffic/img/parkNumBg.png") no-repeat 100% 100%;
                        background-size: 100% 100%;
                        text-align: center;
                        color: #97D0F4;

                        span {
                            font-size: 20px;
                            color: #fff;
                            font-family: PMZD, serif;
                            position: relative;
                            top: 1px;
                        }

                        u {
                            text-decoration: none;
                            font-size: 12px;
                            margin-left: 4px;
                        }

                        .top {
                            margin-bottom: 9px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                        .bottom{
                            font-size: 12px;
                        }
                    }
                }
            }

            // 游客统计
            .markBg-box-tourist {
                height: 112px;
                margin: 10px 0px 0px 15px;
                display: flex;

                .pie-echarts {
                    margin-right: -11px;
                    text-align: center;

                    .pieEcharts {
                        width: 82px;
                        height: 82px;
                        margin: 0 auto;
                    }

                    p {
                        width: 120px;
                        font-size: 12px;
                        color: #97D0F4;
                    }
                }

                .tourist-text {
                    .tourist-text-item {
                        float: left;
                        margin: 5px 10px;

                        p:nth-child(1) {
                            font-size: 18px;
                            color: #32E9FF;
                            margin-left: 10px;
                            span:nth-child(1) {
                                font-family: PMZD, serif;
                                margin-right: 4px;
                            }
                            span:nth-child(2){
                                font-size: 12px;
                            }

                        }

                        p:nth-child(2) {
                            font-size: 12px;
                            color: #97D0F4;

                            i {
                                display: inline-block;
                                content: '';
                                width: 7px;
                                height: 7px;
                                background: #97D0F4;
                                transform: rotate(45deg);
                                margin-right: 5px;
                            }
                        }
                    }


                }
            }
        }
    }
</style>